<template>
  <el-menu>
      <el-menu-item index="program1" @click="handler1">编程式导航(push)</el-menu-item>
      <el-menu-item index="program2" @click="handler2">编程式导航(back)</el-menu-item>
      <el-menu-item index="program3" @click="handler3">编程式导航(forward)</el-menu-item>
  </el-menu>
</template>

<script>
/* eslint-disable */
export default {
    name: 'Sidebar',
    methods: {
        handler1(){
            // console.log( 'route: ' , this.$route );
            // console.log( 'router: ' , this.$router );

            // 通过 路由名称 实现导航并传递参数
            this.$router.push( { name: 'advanced' , params: { id: 9527 } } );

            // 通过 路径 实现导航并传递参数 
            // this.$router.push( { path: '/advanced' , query: { id: 9527 } } );

            // router.replace( { path: '/advanced' } );
            // this.$router.push( { path: '/advanced' , replace: true } );
        },
        handler2(){
            this.$router.back() ; // 类似于 history.back()
        },
        handler3(){
            this.$router.forward() ; // 类似于 history.forward()
        }
    }
}
</script>

<style>

</style>